<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >


<!--头部-->
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title th:text="${title}">主页</title>
<!--    <link rel="icon" href="/static/image/urlImg/index1.ico" type="image/ico">-->
    <!--    导入js-->
    <script th:src="@{/plugins/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>

    <!--    导入layui组件，优秀的弹窗框架-->
    <script th:src="@{/plugins/layui-v2.6.8/layui/layui.js}"></script>

    <!--    导入css-->
    <link th:href="@{/plugins/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-img.css}" rel="stylesheet">

    <!--    站点图标-->
<!--    <link rel="icon" th:href="@{/image/urlImg/index1.ico}" type="image/ico">-->

    <!--    导入layui组件，优秀的弹窗框架-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.6.8/layui/css/layui.css}">
    <style>
        a {
            /*color: #000000;*/
            text-decoration: none;
            /*链接取消下划线*/
        }
    </style>
</head>

<!--头部导航-->
<div th:fragment="headNav" class="layui-header" >
    <!-- 头部区域（可配合layui 已有的水平导航） -->
<!--    <div class="layui-logo layui-hide-xs layui-bg-black">logo</div>-->
    <ul class="layui-nav ">
        <!-- 移动端显示 -->
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this"><a href="/">首页</a></li>
<!--                            <li class="layui-nav-item">-->
<!--                                <a href="javascript:;">常规</a>-->
<!--                            </li>-->
<!--                            <li class="layui-nav-item"><a href="">导航</a></li>-->
<!--                            <li class="layui-nav-item">-->
<!--                                <a href="javascript:;">子级</a>-->
<!--                                <dl class="layui-nav-child">-->
<!--                                    <dd><a href="">菜单1</a></dd>-->
<!--                                    <dd><a href="">菜单2</a></dd>-->
<!--                                    <dd><a href="">菜单3</a></dd>-->
<!--                                </dl>-->
<!--                            </li>-->
<!--                            <li class="layui-nav-item">-->
<!--                                <a href="javascript:;">选项</a>-->
<!--                                <dl class="layui-nav-child">-->
<!--                                    <dd><a href="">选项1</a></dd>-->
<!--                                    <dd class="layui-this"><a href="">选项2</a></dd>-->
<!--                                    <dd><a href="">选项3</a></dd>-->
<!--                                </dl>-->
<!--                            </li>-->

        </ul>
        <span class="layui-nav-bar" style="left: 155.625px; top: 55px; width: 0px; opacity: 0;"></span>
    </ul>
    <ul class="layui-nav layui-layout-right">
        <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item" id="open-notify"><a href="javascript:;">公告<span class="layui-badge-dot"></span></a></li>
            <li class="layui-nav-item">
                <form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" maxlength="20" id="articleTitle" placeholder="搜索" aria-label="Search">
                    <button class="btn btn-outline-info my-2 my-sm-0" onclick="searchArticle()" type="button">搜索</button>
                </form>
                <script type="text/javascript">
                    function searchArticle() {
                       var articleTitle =  $("#articleTitle").val()
                        if (articleTitle!=''){
                            layer.open({
                                type : 2,
                                title : '匹配结果',
                                anim : 2,
                                area : [ '90%', '90%' ],
                                maxmin : true,
                                shadeClose: true,
                                content : "/searchArticle/"+articleTitle //通过请求打开附件视图
                            });
                        }else {
                            alert("请输入内容")
                        }
                    }
                </script>
            </li>

            <li class="layui-nav-item" sec:authorize="isAuthenticated()">
                <a href="javascript:;" onclick="contribution()">投稿</a>
                <script type="text/javascript">
                    //投稿
                    function contribution(){
                        var userName = $("#userName").text()
                        // alert(userName)
                        layer.open({
                            type : 2,
                            title : '投稿',
                            anim : 2,
                            area : [ '90%', '90%' ],
                            maxmin : true,
                            shadeClose: true,
                            content : "/contribution/"+userName //通过请求打开附件视图
                        });
                    }
                </script>
            </li>
            <li class="layui-nav-item" sec:authorize="!isAuthenticated()">
                <a href="#"></a>
            </li>
            <li class="layui-nav-item" >
                    <span sec:authorize="!isAuthenticated()">
                        <a  href="/toLogin" class="btn btn-light" style="color: black;display: inline-block">登录/注册</a>
                    </span>
                <a sec:authorize="isAuthenticated()" href="javascript:;">
                    <span th:if="${session?.MyUser?.headPortrait}!=null">
                        <img th:if="${session.MyUser.headPortrait} != null" th:src="${session.MyUser.headPortrait}" class="layui-nav-img">
                        <img th:if="${session.MyUser.headPortrait} == null" th:src="@{/image/logo.jpg}" class="layui-nav-img">
                    </span>
                    <span sec:authentication="name" id="userName"></span>
                </a>
                <dl sec:authorize="isAuthenticated()" class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="goUserCenter()" class="text-center">个人中心</a></dd>

                    <script type="text/javascript">
                        //个人中心
                        function goUserCenter(){
                            var userName = $("#userName").text()
                            // alert(userName)
                            layer.open({
                                type : 2,
                                title : '个人信息',
                                anim : 2,
                                area : [ '90%', '90%' ],
                                maxmin : true,
                                shadeClose: true,
                                content : "/userCenter/"+userName //通过请求打开附件视图
                            });
                        }
                    </script>

<!--                    <dd><a href="javascript:;" class="text-center">设置</a></dd>-->
                    <hr>
                    <dd style="text-align: center;"><a th:href="@{/logout}">退出登录</a></dd>
                </dl>

            </li>
        </ul>
        <span class="layui-nav-bar" style="left: 165.9px; width: 0px; opacity: 0; top: 56px;"></span>
    </ul>
</div>
<!--左侧导航-->
<div th:fragment="leftNav" class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item"><a href="/">主页</a></li>
            <li class="layui-nav-item"><a href="/admin" sec:authorize="hasAuthority('admin')">后台管理</a></li>
<!--            <li class="layui-nav-item"><a href="/admin" sec:authorize="hasAuthority('admin')">后台管理</a></li>-->

            <li class="layui-nav-item"><a href="">联系我们</a></li>
            <span class="layui-nav-bar" style="top: 49.675px; height: 0px; opacity: 0;"></span></ul>
    </div>
</div>

<!--评论-->
<div th:fragment="comment(article)" style="margin-bottom: 60px">
    <div class="layui-form-item layui-form-text" id="commentbox">
        <label class="layui-form-label">评论区</label>
        <div class="layui-input-block" style="margin-bottom: 20px;position: relative ">
            <textarea placeholder="请输入内容" class="layui-textarea" maxlength="50" id="comment" name="comment" style="padding-bottom: 45px"></textarea>
            <input type="hidden" id="articleId" th:value="${article.id}" >
            <span sec:authentication="name" style="display: none" id="userNameC"></span>
            <div style="position: absolute;right: 7px;bottom: 7px">
                <div sec:authorize="isAuthenticated()" class="text-right">
<!--                    <button type="button" class="btn btn-info">提交</button>-->
                    <button type="button" onclick="addComment()" class="btn  btn-primary" >提交</button>
                </div>
                <div sec:authorize="!isAuthenticated()" class="text-right">
                    <button type="button" class="btn btn-info" disabled >请先登录</button>
                </div>
            </div>
        </div>
    </div>
    <div >
        <div class="card">
            <div class="card-header" th:text="'评论:('+${article.comments.size()}+')'" >

            </div>
            <div class="card-body" th:each="list : ${article.comments}">
                <blockquote class="blockquote mb-0" style="border-bottom: solid 1px rgba(0 ,0, 0,0.1)">
                    <p th:text="${list.userName}" style="font-size: 17px;margin-bottom: 15px;display: inline-block"></p> <span  class="iconfont icon-shanchu" sec:authorize="hasAuthority('admin')" th:onclick="'javascript:deleteComment('+${list.id}+')'" ></span>
                    <footer class="blockquote-footer"> <cite title="Source Title" th:text="${list.comment}"></cite></footer>
                </blockquote>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        function addComment() {
            // alert("ok")

            if ($('#comment').val()==""){
                alert("评论不能为空！")
            }else {
                $.ajax({
                    url:"/insertComment",
                    // dataType:'json',
                    data:{
                        "articleId": $("#articleId").val(),
                        "userName":$('#userNameC').text(),
                        "comment":$('#comment').val(),
                    },
                    success:function (data) {
                        alert("评论成功")
                        location.reload();
                    }
                });
            }
        }
        function deleteComment(id) {
            $.ajax({
                url:"/admin/deleteComment/"+id,
                // dataType:'json',
                success:function (data) {
                    alert("删除成功")
                    location.reload();
                }
            });
        }
    </script>
</div>

<!--分页-->
<ol class="page-navigator" th:fragment="pageNav(pageInfo, prevText, nextText, prefix)">
    <th:block th:if="${pageInfo.hasPreviousPage}">
        <li class="prev"><a th:href="@{'/'+${prefix}+'/'+${pageInfo.prePage}}" th:text="${prevText}"></a></li>
    </th:block>
    <th:block th:each="navIndex :${ pageInfo.navigatepageNums}">
        <li th:class="${pageInfo.pageNum==navIndex}?'current':''"><a th:href="@{'/'+${prefix}+'/'+${navIndex}}"
                                                                     th:text="${navIndex}"></a></li>
    </th:block>
    <th:block th:if="${pageInfo.hasNextPage}">
        <li class="next"><a th:href="@{'/'+${prefix}+'/'+${pageInfo.nextPage}}" th:text="${nextText}"></a></li>
    </th:block>

</ol>

<!--推荐-->

<div th:fragment="bottomNav" class="layui-footer text-right">
    <!-- 底部固定区域 -->
    <link th:href="@{/css/font-img.css}" rel="stylesheet">
    <a href="#gotop" style="text-decoration: none;" >
        返回顶部
        <span class="iconfont icon-dingbu" style="margin-right: 100px"></span>
    </a>
</div>

</html>